<template>
  <li class="product-wrap" :class="[height]">
    <img
      class="pro-img"
      src="../../assets/product.jpg"
      alt=""
      :class="[height]"
    />
    <div class="pro-info-wrap" :class="[height]">
      <h3>{{ proInfo.name }}</h3>
      <div class="price-count-wrap">
        <p class="price">
          参考价 <span class="red">￥{{ proInfo.price }}</span>
        </p>
        <div class="count-wrap" ref="addBtnWrap">
          <img @click="sub" class="sub-btn" src="../../assets/sub.png" alt="" />
          <span class="product-count">{{ proInfo.count }}</span>
          <img @click="add" class="add-btn" src="../../assets/add.png" alt="" />
        </div>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: "ProductInfo",
  props: {
    height: {
      type: String,
      default: "max-height",
    },
    proInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  methods: {
    add() {
      if(!this.$store.state.selectedProducts.length) {
        setTimeout(() => {
          this.shopCarAnimate();
        }, 0)
      } else {
        this.shopCarAnimate();
      }
      
      this.$store.commit("add", this.proInfo);
      this.ballMove(this.$refs.addBtnWrap, document.querySelector('#car-box'));
    },
    sub() {
      // 数量为1  return
      if (this.proInfo.count === 1) {
        return;
      }
      this.$store.commit("sub", this.proInfo);
    },
    // 绘制小球
    createBall() {
      const ballDom = document.createElement("div");
      ballDom.style.width = "20px";
      ballDom.style.height = "20px";
      ballDom.style.border = "1px solid #FF752F";
      ballDom.style.background = "#FF752F";
      ballDom.style.borderRadius = "50%";
      ballDom.style.position = "absolute";
      ballDom.style.zIndex = "9999";
      return ballDom;
    },
    // 传入两个dom或id
    ballMove(addBtn, shopCar) {
      let addBtnDom = null,
        shopCarDom = null;
      if (typeof addBtn === "string") {
        addBtnDom = document.querySelector(addBtn);
      } else if (addBtn instanceof HTMLElement) {
        addBtnDom = addBtn;
      } else {
        alert(
          "传入的参数错误： 第一个参数应为增加按钮的dom元素或该元素的选择器。"
        );
        return;
      }

      if (typeof shopCar === "string") {
        shopCarDom = document.querySelector(shopCar);
      } else if (shopCar instanceof HTMLElement) {
        shopCarDom = shopCar;
      } else {
        alert(
          "传入的参数错误： 第二个参数应为购物车的dom元素或该元素的选择器。"
        );
        return;
      }

      // 获取两个dom的位置
      const addBtnposition = addBtnDom.getBoundingClientRect();
      const shopCarPosition = shopCarDom.getBoundingClientRect();
      const addBtnCenterX = (addBtnposition.left + addBtnposition.right) / 2;
      const addBtnCenterY = (addBtnposition.top + addBtnposition.bottom) / 2;
      const shopCarCenterX = (shopCarPosition.left + shopCarPosition.right) / 2;
      const shopCarCenterY = (shopCarPosition.top + shopCarPosition.bottom) / 2;
      //计算增加按钮 是在 相对于购物车的 左边还是右边（用于控制后面的移动方向）
      const relativePosition = addBtnCenterX > shopCarCenterX ? -1 : 1;

      // 获取连个dom之间的距离
      const xDistance = Math.abs(addBtnCenterX - shopCarCenterX);
      const yDistance = Math.abs(addBtnCenterY - shopCarCenterY);

      // 绘制小球并设置其位置
      let ballDom = this.createBall();
      ballDom.style.top = addBtnCenterY + "px";
      ballDom.style.left = addBtnCenterX + "px";
      document.body.appendChild(ballDom);
      //小球的横竖坐标
      let xAbscissa = 0,
        yAbscissa = 0;

      //设置移动路径
      const ballTimer = setInterval(function () {
        //每次重新坐标
        xAbscissa += 5 * relativePosition;
        yAbscissa =
          (yDistance / Math.pow(xDistance, 2)) * Math.pow(xAbscissa, 2);
        ballDom.style.top = addBtnCenterY + yAbscissa + "px";
        ballDom.style.left = addBtnCenterX + xAbscissa + "px";
        //检查是否到达终点
        const surplusDistance = parseInt(ballDom.style.left) - shopCarCenterX;
        if (Math.abs(surplusDistance) <= 10) {
          ballDom.style.display = 'none';
          document.body.removeChild(ballDom); // 动画完成移除dom
          ballDom = null;
          console.log(ballDom);
          clearInterval(ballTimer);
        }
      }, 5);
    },
    // 购物车开合动画
    shopCarAnimate() {
      // 购物车序列帧动画
      const imglength = 17;
      const boxDom = document.querySelector('#uu-box-animation');
      const totalWidth = boxDom.offsetWidth;
      const oneFrameWidth = parseInt(totalWidth / imglength);
      let count = 0;
      const timer = setInterval(() => {
        if(count > 14) {
          clearInterval(timer);
        }
        count++;
        boxDom.style.left = `-${oneFrameWidth * count}px`;
      }, 30)
    }
  },
};
</script>

<style scoped>
.mini-height {
  height: 0.7rem;
}
.max-height {
  height: 1.15rem;
}
.product-wrap {
  margin-bottom: 0.15rem;
  box-sizing: border-box;
  padding: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* height: 1.15rem; */
  overflow-y: hidden;
}
.pro-img {
  width: 1.15rem;
  /* height: 1.15rem; */
}
.product-wrap .pro-info-wrap {
  margin-left: 0.1rem;
  /* height: 1.15rem; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-wrap .pro-info-wrap h3 {
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-size: 0.14rem;
}
.price-count-wrap {
  display: flex;
  justify-content: space-between;
}
.red {
  color: #fa5150;
}
.count-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.count-wrap img {
  width: 0.2rem;
  height: 0.2rem;
}
.product-count {
  color: #999999;
  padding: 0 0.04rem;
}
</style>
